<template>
	<div>
		<el-row>
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="车辆分配" name="first">
					<el-row :gutter="24">
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">选择角色:</p>
						</el-col>
						<el-col :span="4">
							<el-select v-model="role" size='small' @change="changeClick" clearable>
								<el-option v-for="item in roleCombo " :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">选择人员:</p>
						</el-col>
						<el-col :span="4">
							<el-select v-model="people" size='small' clearable>
								<el-option v-for="item in peopleCombo " :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="2">
							<el-button type="primary" size="small" @click="allotQuery">查询</el-button>
						</el-col>
						<el-col :span="12" style="text-align: right;margin-left:-20px;">
							<el-button type="primary" size="small" @click='add'>新增</el-button>
							<el-button type="primary" size="small" @click="del">删除</el-button>
							<el-button type="primary" size="small" @click="clear">清除</el-button>
						</el-col>
					</el-row>
					<el-row>
						<el-table :data="tableData.dataList" border @selection-change="handleSelectionChange">
							<el-table-column type="selection" width="60" fixed>
							</el-table-column>
							<el-table-column prop="rName" label="角色" width="180">
							</el-table-column>
							<el-table-column prop="uName" label="人员" width="180">
							</el-table-column>
							<el-table-column prop="confType" label="分配类型" width="200" :formatter="confTypeCov">
							</el-table-column>
							<el-table-column prop="confVal" label="分配值">
							</el-table-column>
							<el-table-column prop="autoNewCar" label="新车自动分配" :formatter="statusCov">
							</el-table-column>
							<el-table-column label="操作" width="190" fixed="right">
								<template scope="scope">
									<el-tooltip class="item" effect="light" content="分配车辆" placement="top" v-if="scope.row.confType!='0'&&scope.row.confType!='5'">
										<el-button type="primary" size="mini" @click.native.prevent="Allot(scope.$index)">分配</el-button>
									</el-tooltip>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination small @size-change="handleCurrentChange" @current-change="handleGroupCurrentChange" :current-page="curPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
						</el-pagination>
					</el-row>
					<!--
		                    	作者：1040117458@qq.com
		                    	时间：2017-05-11
		                    	描述：车辆分配
		                    -->
					<el-dialog title="车辆分配" v-model="carFormShow">
						<el-form :model="carFormData" ref="carForm" :rules="carRule" label-width="120px">
	
							<el-col :span="24">
								<el-form-item label="角色:" prop="roleId">
									<el-select size="small" v-model="carFormData.roleId" @change="changeClick" placeholder="请选择">
										<el-option v-for="item in roleCombo" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="人员:" prop="uId">
									<el-select size="small" v-model="carFormData.uId" placeholder="请选择">
										<el-option v-for="item in peopleCombo" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="分配类型" prop="confType">
									<el-select size="small" v-model="carFormData.confType" @change="changeClicks" placeholder="请选择">
										<el-option v-for="item in allotCombo" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="24" v-if="maintWH">
								<el-form-item label="尾号值:" prop="confVal">
									<el-input size="small" v-model="carFormData.confVal" placeholder="请输入内容 以逗号分隔">
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="24" v-if="maintWS">
								<el-form-item label="尾数值:" prop="confVal">
									<el-input size="small" v-model="carFormData.confVal" placeholder="请输入内容 以逗号分隔">
									</el-input>
								</el-form-item>
							</el-col>
							<el-form-item label="新车自动分配:" prop="autoNewCar">
								<el-select size="small" v-model="carFormData.autoNewCar" placeholder="请选择">
									<el-option label="否" value="0">
									</el-option>
									<el-option label="是" value="1">
									</el-option>
								</el-select>
							</el-form-item>
	
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="carFormShow = false">取 消</el-button>
							<el-button type="primary" @click="saveRole">提 交</el-button>
						</div>
					</el-dialog>
					<!--
		                    	作者：1040117458@qq.com
		                    	时间：2017-05-11
		                    	描述：车辆分配界面
		                    -->
					<el-dialog title="车辆分配" v-model="allotFormShow">
						<el-form :model="allotFormData" ref="allotForm" label-width="100px">
	
							<el-col :span="24">
								<el-form-item label="分配范围:" prop="allotRange">
									<el-select size="small" v-model="allotFormData.allotRange" placeholder="请选择">
										<el-option label="全部车辆" value="0">
										</el-option>
										<el-option label="未分配车辆" value="1">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="vin:" v-if="confType=='3'">
									<el-upload :action="action" :data="upData" name="upExecl" auto-upload="upGo" :on-progress="process" :on-error="error" :on-success="success">
										<el-button size="small" type="primary">点击上传</el-button>
										<span slot="tip">只能上传xls/xlsx文件</span>
									</el-upload>
								</el-form-item>
							</el-col>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="allotFormShow = false">取 消</el-button>
							<el-button type="primary" @click="saveAllot">提 交</el-button>
						</div>
					</el-dialog>
				</el-tab-pane>
				<el-tab-pane label="车辆查询" name="second">
					<el-row :gutter="24">
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">选择角色:</p>
						</el-col>
						<el-col :span="3">
							<el-select v-model="role" size='small' clearable>
								<el-option v-for="item in roleCombo " :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">选择人员:</p>
						</el-col>
						<el-col :span="3">
							<el-select v-model="people" size='small' clearable>
								<el-option v-for="item in peopleCombo " :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">分配状态:</p>
						</el-col>
						<el-col :span="3">
							<el-select v-model="allotType" size='small' clearable>
								<el-option label="未分配" value="0">
								</el-option>
								<el-option label="已分配" value="1">
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">车牌号:</p>
						</el-col>
						<el-col :span="3">
							<el-input size="small" v-model="plateNum" placeholder="请填写"></el-input>
						</el-col>
						<el-col :span="1" style="margin-right:10px;">
							<p class="queryLabel">车架号:</p>
						</el-col>
						<el-col :span="3">
							<el-input size="small" v-model="vin" placeholder="请填写"></el-input>
						</el-col>
						<el-col :span="4" style="text-align: right;margin-left:-50px;">
							<el-button type="primary" size="small" @click="carQuery">查询</el-button>
							<el-button type="primary" size="small" @click="carAllot">分配</el-button>
						</el-col>
					</el-row>
					<el-row>
						<el-table :data="carData.dataList" border @selection-change="handleSelectionChange2">
							<el-table-column type="selection" width="60" fixed>
							</el-table-column>
							<el-table-column prop="rName" label="角色" width="180">
							</el-table-column>
							<el-table-column prop="uName" label="姓名" width="180">
							</el-table-column>
							<el-table-column prop="vin" label="车架号" width="200">
							</el-table-column>
							<el-table-column prop="plateNum" label="车牌号">
							</el-table-column>
						</el-table>
						<el-pagination small @size-change="handleCurrentChange2" @current-change="handleGroupCurrentChange2" :current-page="curPage2" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="carData.total">
						</el-pagination>
					</el-row>
					<el-dialog title="" v-model="FormShow">
						<el-form :model="FormData" ref="msgForm" :rules="msgRule" label-width="100px">
							<el-col :span="24">
								<el-form-item label="选择角色:" prop="roleId" disabled>
									<el-select size="small" v-model="FormData.roleId" @change="changeClick" placeholder="请选择" disabled>
										<el-option v-for="item in roleCombo" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="选择人员:" prop="uId">
									<el-select size="small" v-model="FormData.uId" placeholder="请选择">
										<el-option v-for="item in peopleCombo" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button type="primary" @click="save">确定</el-button>
						</div>
					</el-dialog>
				</el-tab-pane>
			</el-tabs>
		</el-row>
	</div>
</template>

<script>
export default {
	data: function () {
		return {
			//shangchuan
			action: this.API_ROOT + "/crm/car/conf/restVin",
			upData: {
				id: '',
				uid: window.localStorage.getItem("uid"),
				token: window.localStorage.getItem("token")
			},
			confType: '',
			//车辆分配界面数据开始
			upGo: false,

			//分页
			curPage: 1,
			page: this.page,
			//界面切换
			activeName: 'first',
			//查询条件
			role: '',
			people: '',
			//下拉框
			roleCombo: [],
			peopleCombo: [],
			allotCombo: [{
				label: '全部',
				value: '0',
			}, {
				label: '尾号',
				value: '1',
			}, {
				label: '尾数',
				value: '2',
			}, {
				label: 'vin',
				value: '3',
			}, {
				label: '未分配车辆',
				value: '5',
			},],
			//表格数据
			tableData: {
				total: 0,
				dataList: []
			},
			//付选框选择值
			selectData: [],
			selebodylist: [],
			//dialog数据
			carFormData: {
				roleId: '',
				uId: '',
				confType: '',
				confVal: '',
				autoNewCar: '',
			},
			//dialog数据初始化
			carEmptyData: {
				roleId: '',
				uId: '',
				confType: '',
				confVal: '',
				autoNewCar: '',
			},
			allotFormData: {
				allotRange: '',
			},
			//新增校验规则
			carRule: {
				roleId: [{
					required: true,
					message: '请选择角色',
					trigger: 'blur'
				}],
				uId: [{
					required: true,
					message: '请选择人员',
					trigger: 'blur'
				}],
				confType: [{
					required: true,
					message: '请选择分配类型',
					trigger: 'blur'
				}],
				autoNewCar: [{
					required: true,
					message: '请选择分配类型',
					trigger: 'blur'
				}],
				confVal: [{
					required: true,
					message: '请选择分配类型',
					trigger: 'blur'
				}],
			},
			//dialog显示
			allotFormShow: false,
			carFormShow: false,
			//为好位数显示
			maintWH: false,
			maintWS: false,
			allotButton: true,
			//车辆分配界面数据结束

			//车辆查询界面数据开始
			selectData2: [],
			//表格数据
			carData: {
				total: 0,
				dataList: []
			},
			curPage2: 1,
			//dialog数据
			FormData: {
				roleId: '',
				uId: '',
			},
			emptyFormData: {
				roleId: '',
				uId: '',
			},
			FormShow: false,
			allotType: '',
			plateValue: '',
			plateNum: '',
			vin: '',
			msgRule: {
				roleId: [{
					required: true,
					message: '请选择角色',
					trigger: 'blur'
				}],
				uId: [{
					required: true,
					message: '请选择人员',
					trigger: 'blur'
				}],

			},
			id: '',
			//车辆查询界面数据结束

		}
	},
	methods: {
		//分页查询
		handleCurrentChange: function () { },
		//字典分组,当前页切换
		handleGroupCurrentChange: function (currentPage) {
			this.$data.curPage = currentPage;
			this.allotQuery();
		},
		//分页查询
		handleCurrentChange2: function () { },
		//字典分组,当前页切换
		handleGroupCurrentChange2: function (currentPage) {
			this.$data.curPage2 = currentPage;
			this.carQuery();
		},
		//复选框触发方法
		handleSelectionChange: function (val) {
			this.$data.selectData = val;
			this.$data.selebodylist = val;
		},
		//复选框触发方法
		handleSelectionChange2: function (val) {
			this.$data.selectData2 = val;
		},
		//切换标签页
		handleClick: function (tab, event) {
			this.$data.role = this.$data.roleCombo[0].value;
			this.$data.people = this.$data.peopleCombo[0].value;

		},
		//点击类型
		changeClicks: function (data) {

			switch (data) {
				case '0':
					this.$data.maintWH = false;
					this.$data.maintWS = false;
					break;
				case '1':
					this.$data.maintWH = true;
					this.$data.maintWS = false;
					break;
				case '2':
					this.$data.maintWH = false;
					this.$data.maintWS = true;
					break;
				case '3':
					this.$data.maintWH = false;
					this.$data.maintWS = false;
					break;
				case '4':
					this.$data.maintWH = false;
					this.$data.maintWS = false;
					break;
			}

		},
		//点击角色
		changeClick: function (data) {
			this.$data.carFormData.uId = '';

			if (data != '') {

				this.groupComboFs(data);
				this.userComboF(data);
			}
		},
		//加载新增分组的下拉数据
		groupComboFs: function (roleIds) {
			//加载分组

			this.$http.get(this.API_ROOT + '/crm/group/combo', {
				params: {
					type: roleIds
				}
			}).then((response) => {
				// success callback
				this.$data.groupCombos = response.data;
			}, (response) => {
				// error callback
			});
		},
		//新增的客服查询
		userComboF: function (roleIds) {
			//加载用户

			this.$http.get(this.API_ROOT + '/crm/config/userCombo', {
				params: {
					type: roleIds
				}
			}).then((response) => {
				// success callback
				this.$data.peopleCombo = response.data;
			}, (response) => {
				// error callback
			});
		},
		//新增
		add: function () {
			this.$data.carFormData = Object.assign(this.$data.carFormData, this.$data.carEmptyData);
			this.$data.carFormShow = true;
		},
		//删除
		del: function () {
			if (this.$data.selectData.length == 1) {
				this.$confirm('确认要删除这条数据吗？本操作会将其分配车辆一并删除！', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var data = this.$data.selectData[0].id;
					this.$http.get(this.API_ROOT + '/crm/car/conf/del', {
						params: {
							id: data,
						}
					}).then(function (resp) {
						// success callback
						//
						this.$message(resp.data.msg);
						this.allotQuery();
					}, function (error) { })

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消此操作'
					});
				});
			} else {
				this.$message.error("请选择一条数据")
			}

		},
		//清除按钮
		clear: function () {
			debugger;
			//验证有没有选择数据
			if(this.$data.selebodylist.length == 0){
				this.$message.error("请先选择数据");
			}else{
			this.$confirm('确认要清除？本操作会将其分配车辆一并清除，清空之后需要重新分配！', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				//					var data = {};
				//					data=this.$data.selebodylist;
				this.$http.post(this.API_ROOT + '/crm/car/conf/empty', this.$data.selebodylist)
					.then(function (resp) {
						// success callback

						this.$message(resp.data.msg);
						this.allotQuery();
					}, function (error) { })

			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消此操作'
				});
			});
			}
		},
		//车辆查询查询
		carQuery: function () {
			debugger
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/crm/car/conf/carPage', //url
				params: { //发送的参数
					roleId: this.$data.role,
					userId: this.$data.people,
					type: this.$data.allotType,
					plateNum: this.$data.plateNum,
					vin: this.$data.vin,
					start: this.$data.curPage2,
					limit: this.$data.page.pageSize,
				}
			}).then(function (resp) {

				if (resp.data.success) {
					resp.data.total = parseInt(resp.data.total);
					this.$data.carData = resp.data;
				} else {
					this.$message.error(resp.data.msg);
				}

			}, function (error) {

			})

		},
		//车辆分配查询按钮
		allotQuery: function () {

			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/crm/car/conf/page', //url
				params: { //发送的参数
					roleId: this.$data.role,
					userId: this.$data.people,
					start: this.$data.curPage,
					limit: this.$data.page.pageSize,
				}
			}).then(function (resp) {

				resp.data.total = parseInt(resp.data.total);
				this.$data.tableData = resp.data;
			}, function (error) {

			})

		},
		//分配车辆按钮
		Allot: function (index) {

			if (this.$data.tableData.dataList[index].confType == 0) {
				this.$data.allotButton = false;
			} else {
				this.$data.allotButton = true;
				this.$data.allotFormShow = true;
				this.$data.id = this.$data.tableData.dataList[index].id;
				this.$data.upData.id = this.$data.tableData.dataList[index].id;
				this.$data.allotFormData.allotRange = '';
				this.$data.confType = this.$data.tableData.dataList[index].confType;
			}

		},
		saveAllot: function () {

			this.$refs.allotForm.validate(function (valid) {
				if (valid) {
					this.$http.get(this.API_ROOT + '/crm/car/conf/rest', {
						params: {
							id: this.$data.id,
							type: this.$data.allotFormData.allotRange,
						}
					}).then(resp => {
						if (resp.data.success) {
							this.$message(resp.data.msg);
							this.$data.allotFormShow = false;
							this.allotQuery();
						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {

					})
				}
				return false;
			}.bind(this));

		},
		//车辆分配
		carAllot: function () {
			if (this.$data.selectData2.length == 0) {
				this.$message.error("请选择数据")
			} else {
				this.$data.FormData = Object.assign(this.$data.FormData, this.$data.emptyFormData);
				this.$data.FormShow = true;
				this.$data.FormData.roleId = this.$data.role;
			}

		},
		//保存
		saveRole: function () {

			this.$refs.carForm.validate(function (valid) {
				if (valid) {
					this.$http.post(this.API_ROOT + '/crm/car/conf/save', this.$data.carFormData, {
						params: {}
					}).then(resp => {
						if (resp.data.success) {
							this.$message(resp.data.msg);
							this.$data.carFormShow = false;
							this.allotQuery();
						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {

					})
				}
				return false;
			}.bind(this));

		},

		save: function () {
			this.$refs.msgForm.validate(function (valid) {
				if (valid) {
					this.$http.post(this.API_ROOT + '/crm/car/conf/carReset', this.$data.selectData2, {
						params: {
							roleId: this.$data.FormData.roleId,
							userId: this.$data.FormData.uId,
						}
					}).then(resp => {
						if (resp.data.success) {
							this.$message(resp.data.msg);
							this.$data.FormShow = false;
							this.carQuery();
						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {

					})
				}
				return false;
			}.bind(this));

		},
		//新车自动分配转换
		statusCov: function (row, column) {
			if (row.autoNewCar == '0') return "否";
			return "是";
		},
		confTypeCov: function (row, column) {
			switch (row.confType) {
				case '0':
					return "全部";
				case '1':
					return "尾号";
				case '2':
					return "尾数";
				case '3':
					return "vin";
				case '5':
					return "未分配车辆";

			}
		},
		process: function () {
			this.$data.loadingVue = this.$loading({
				fullscreen: true,
				text: "正在导入数据，请稍候"
			});
		},
		error: function (err, response) {
			this.$message.error(response.data.msg);
			this.$data.loadingVue.close();
		},
		success: function (response) {
			this.$data.loadingVue.close();

			if (response.success) {
				this.$message(response.msg);
			} else {
				this.$message.error(response.msg);
			}

		},
	},
	created: function () {
		this.allotQuery();
		//加载模块类型
		this.$http.get(this.API_ROOT + '/crm/config/roleCombo', {

			params: {
				//group: "msgType"
			}

		}).then((response) => {
			// success callback
			this.$data.roleCombo = response.data;
		}, (response) => {
			// error callback
		});
		//人员下拉
		this.$http.get(this.API_ROOT + '/rbac/user/allUser', {
			params: {
				//group: "msgType"
			}

		}).then((response) => {

			// success callback
			this.$data.peopleCombo = response.data.dataList;
		}, (response) => {
			// error callback
		});
	}
}
</script>

<style>

</style>